<template>
	<view class="page-user content" :style="{ direction: $store.state.dir }">
		<status-bar></status-bar>
		<view class="user-account flex-layout-col flex-center">
			<avatar-image></avatar-image>
			<view v-if="user" class="user-account-name h3" style="margin-top:30rpx;">
				{{ user.name }}
			</view>
			<view v-else class="user-account-name login-tip" @click="handleLogin">{{ $t('user.notlogged') }}</view>
		</view>
		<!-- <button @click.stop="handleWebView">weiview</button> -->

		<view class="user-menu">
			<menu-item data="submit" v-show="isCanSubmit" bgColor="#ecf1ea" icon="icon-plus" color="#28D796"
				:name="$t('user.addHouse')" @action="handleMenuAction"></menu-item>
			<!-- <menu-item data="my-house" v-show="isCanSubmit" bgColor="#ecf1ea" icon="icon-publish" color="#28D796"
				:name="$t('user.my-house')" @action="handleMenuAction"></menu-item>
			<menu-item data="trip" v-show="isCanSubmit" bgColor="#ecf1ea" icon="icon-info" color="#28D796"
				:name="$t('title.myorder')" @action="handleMenuAction"></menu-item> -->
				<menu-item data="order" bgColor="#ecf1ea" icon="icon-info" color="#28D796"
					name="my orders" @action="handleMenuAction"></menu-item>

			<menu-item data="landlord" v-show="isCanSubmit" bgColor="#ecf1ea" icon="icon-message" color="pink"
				:name="$t('text.house.owner')" @action="handleMenuAction"></menu-item>
			<menu-item data="bank" bgColor="#ecf1ea" icon="icon-email" color="#E90C0C" :name="$t('title.myaccount')"
				@action="handleMenuAction"></menu-item>
			<menu-item data="coupon" bgColor="#ecf1ea" icon="icon-user" color="rgb(73, 127, 247)"
				:name="$t('my.coupon')" @action="handleMenuAction"></menu-item>
			<menu-item data="bonus" bgColor="#ecf1ea" icon="icon-back" color="#FF3C15" name="my bonus"
				@action="handleMenuAction"></menu-item>
			<menu-item data="profile" bgColor="#f4eae8" icon="icon-account" color="#f69663" :name="$t('user.profile')"
				@action="handleMenuAction"></menu-item>
			<!-- @action="handleTemplateDownload" -->
			<menu-item bgColor="#DBF5EC" icon="icon-contracts" v-show="systemConfig.serviceContractsUrl" color="#91cb92"
				:name="$t('user.contract')"></menu-item>
			<!-- #ifdef H5 -->
			<menu-item data="download" bgColor="#DBF5EC" icon="icon-download" color="#91cb92"
				:name="$t('user.download')" @action="handleMenuAction"></menu-item>
			<!-- #endif -->
			<menu-item data="about" bgColor="#e2e0f8" icon="icon-info" color="#4a43e4" :name="$t('user.about')"
				@action="handleMenuAction"></menu-item>
			<menu-item data="seller" bgColor="#e2e0f8" icon="icon-back" color="pink" :name="$t('user.seller')"
				@action="handleMenuAction"></menu-item>
			<!-- <menu-item data="group" bgColor="#e2e0f8" icon="icon-user" color="blue" :name="$t('user.group.order')"
				@action="handleMenuAction"></menu-item> -->
			<!-- <menu-item data="logout" v-show="user" bgColor="#fbeae2" icon="icon-logout" color="#ff6309" :name="$t('user.logout')" @action="handleMenuAction"></menu-item> -->
			<u-button type="error" @click="handleLogout" v-show="user" :text="$t('user.logout')"
				style="margin-top: 80px; width: 50%"></u-button>
			<!-- <menu-item bgColor="#DBF5EC" icon="icon-privacy" color="#91cb92" :name="$t('user.policy')"></menu-item> -->
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" title="prompt" @confirm="dialogConfirm">
				<view class="">
					{{$t('isPhone')}}
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		APP_ROLE,
		CurrentRole
	} from '../../config';
	import {
		getUserInfo,
		myShopStatus
	} from "@/lib/service"
	export default {
		data() {
			return {
				contracts: '',
				status:'-2'
			};
		},

		computed: {
			...mapGetters(['systemConfig']),
			isCanSubmit() {
				return APP_ROLE.Agent == CurrentRole;
			},
			user() {
				return this.$store.state.user;
			}
		},
		onShow() {
			 this.handleShopStatus()	
		},
		methods: {
			handleShopStatus(){
				myShopStatus().then((res) => {
					if(res.statusCode==0){
						this.status = res.data.status;
					}
				}).catch((res) => {
				
				});
			},
			changeLocale(locale) {
				this.$i18n.locale = 'ar';
				uni.setLocale('ar');
			},

			downloadFile() {
				var url = this.systemConfig.serviceContractsUrl;
				plus.runtime.openURL(url);
			},
			handleTemplateDownload() {
				var url = this.systemConfig.serviceContractsUrl;
				// #ifdef H5
				window.location.href = url;
				// #endif

				// #ifdef APP-PLUS
				this.downloadFile();
				// #endif
			},
			handleMenuAction(data) {
				switch (data) {
					case 'logout':
						this.handleLogout();
						break;
					case 'about':
						uni.navigateTo({
							url: `/pages/about/about`
						});
						break;
					case 'my-house':
						if (!this.user) {
							this.handleLogin();
							return;
						}
						uni.navigateTo({
							url: `/pages/my-house/my-house`
						});
						break;
						case 'order':
							if (!this.user) {
								this.handleLogin();
								return;
							}
							uni.navigateTo({
								url: `/pages/user/my-order/orders`
							});
							break;
					case 'landlord':
						uni.navigateTo({
							url: `./store_orders`
						});
						break;
					case 'download':
						uni.navigateTo({
							url: `/pages/download/download`
						});
						break;
					case 'history':
						if (!this.user) {
							this.handleLogin();
							return;
						}
						uni.navigateTo({
							url: `/pages/history/history`
						});
						break;
					case 'submit':
						this.handlePropertySubmit();
						break;
					case 'trip':
						uni.navigateTo({
							url: `/pages/index/reserve/my-trip`
						});
						break;
					case 'bank':
						uni.navigateTo({
							url: `/pages/user/bank/bankAccount`
						});
						break;
					case 'coupon':
						uni.navigateTo({
							url: "./my_coupon"
						})
						break;
					case 'bonus':
						uni.navigateTo({
							url: "./my_bonus"
						})
						break;
					case 'profile':
						this.handleProfile();
						break;
					case 'seller':
					if(this.status=='-2'){
						uni.navigateTo({
							url: "./seller"
						})
					}else if(this.status=='1'){
						uni.navigateTo({
							url: "./merchant/index"
						})
					}else{
						uni.navigateTo({
							url: "./seller_review?status="+this.status
						})
					}
						break;
					case 'group':
						uni.navigateTo({
							url: "./group_order"
						})
						break;
					default:
				}
			},
			handleLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			// handleWebView(){
			// 	let url = 'https://www.babahabibi.com/pages/index/reserve/success';
			// 	uni.navigateTo({
			// 		url: `/pages/index/reserve/go?url=${url}`
			// 	});
			// },
			handlePropertySubmit() {
				if (!this.user) {
					this.handleLogin();
				} else {
					getUserInfo().then((res) => {
						if (res.data.phone) {
							uni.navigateTo({
								url: '/pages/submit/submit'
							});
						} else {
							this.$refs.inputDialog.open();
						}
					}).catch((res) => {

					});
				}
			},
			dialogConfirm() {
				uni.navigateTo({
					url: '/pages/profile/profile'
				});
			},
			handleProfile() {
				if (!this.user) {
					this.handleLogin();
				} else {
					uni.navigateTo({
						url: `/pages/profile/profile`
					});
				}
			},
			handleLogout() {
				this.$store.dispatch('removeUser');
			}
		}
	};
</script>

<style lang="scss">
	.page-user {
		box-sizing: border-box;

		.page-title {
			font-size: 48rpx;
			margin: 20px 0;
		}

		.user {
			display: flex;
			align-items: center;
		}

		.user-account {
			margin-top: 20px;
			padding: 20px 0;

			&-name {
				font-size: 18px;
				margin-top: 32px;
				font-weight: 500;
			}

			.login-tip {
				color: $app-color-primary;
			}

			&-mail {
				font-size: 14px;
			}
		}

		.mui-button-noborder {
			border: none !important;
		}

		.house-tool {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 60px;
		}
	}
</style>